<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Pareto Graph</title>
        <script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
        <script type="text/javascript" src="pareto.js"></script>
        <style>
            body {font-family:"Sans-serif";font-size:12px;} 
            h1 {font-size:12px;font-weight:bold;}
            text.point {font-size:10px;}
            
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }

            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
            


            .slider_val {
                border:1px solid black;
            }


            .hide {visibility:hidden;}
        </style>
    </head>
    <body>
        <form>
            <h1> Pareto graph, Job name: <span id="job_name">(None)</span>, No. of inds: <span id="num_inds">(None)</span>, No. of live inds: <span id="num_live_inds">(None)</span> </h1>
            <p>
                Select X axis:
                <select id="x_axis_name_dropdown">
                    <option value="1">None</option>
                </select>
                Select Y axis:
                <select id="y_axis_name_dropdown" >
                    <option value="1">None</option>
                </select>
                Show ID: <input id="display_id_checkbox" type="checkbox"/>
                Auto zoom all: <input id="auto_zoom_all_checkbox" type="checkbox"/>
                <button id="zoom_all" type="button">Zoom All</button> 
            </p>
        </form>

    </body>
</html>







